devfandomcom-20200223-history
CodeEditor
| Code = * CodeEditor.js * ./library.js * ./library.css * ./modelist.js | Languages = mw | Type = editing, developer, libraries }}CodeEditor adds Ace editor support to all code pages that have been posted on Fandom. Most code languages supported by Ace remain unsupported around Fandom. This is a niche tool, designed for amateur developers who transfer & code on wikis. It is inspired by the widespread use of Dev Wiki JSON pages for I18n-js messages. The script is limited to desktop editing only, due to lack of mobile support. The script is also locked to the Project, MediaWiki and User namespaces. If you disable syntax highlighting in your global preferences, the script will not run (unless a user configures it to override that preference) - see notes for rationale. Features * Syntax highlighting and text replacement. * Source editor functionality (e.g. diffs and previews). * Temporary removal of code escapes during your session. * Supports 101 languages - see §List of modes. * Linting, available for the following code languages: ** CoffeeScript ** CSS ** JavaScript ** JSON ** Lua ** PHP ** XQuery * Highly configurable and reusable for other scripts. Installation The main script enables the code editor if a supported language can be detected. Configuration The script has some personal configuration variables: * window.CodeEditorHTMLFallback - loads Ace in HTML mode, overriding your editor preference * window.CodeEditorUserPrefOverride - allows CodeEditor to override user preferences on syntax highlighting These configuration options are not allowed sitewide. Library The script also has a library for code editing. The library is: * not restricted by namespace; allowing users to post files in any namespace * allows restriction to JSON or LESS pages etc Events The library makes three mw.hook events available: ; 'dev.codeeditor.library' : When the library is available. : Arguments: codeEditor. ; 'dev.codeeditor.session' : When CodeEditor session begins. : Arguments: codeEditor. ; 'dev.codeeditor.modelist' : When the "modelist" submodule has loaded. : Arguments: codeEditor.modelist. Code editing methods ; codeEditor.config (function) : Conditional, configurable boot handler. : Initialises editor when all conditionals are valid. : Arguments: opts Configuration object. :; opts.mode · opts.modes (string/array; optional) :: Mode(s) for Ace to initialise, by descending priority. :: Fallbacks to automatic mode name based on SUBPAGENAME. :; opts.auto (boolean; optional) :: Whether CodeEditor should auto-detect file language mode (to compare against script mode/s). :: A mode array can be supplied in automatic mode. :; opts.regexp · opts.rgx (RegExp; optional) :: Regular expression tested against FULLPAGENAME. :; opts.pages · opts.page (string/array; optional) :: Page name to test against FULLPAGENAME. : Returns: Script bootloading event; thenable ($.Deferred). Code editing members ; codeEditor.mode (boolean) : The Ace mode that CodeEditor booted within. ; codeEditor.editor (Editor) : Ace editor instance (initialised by CodeEditor). ; codeEditor.session (EditSession) : Ace session object (initialised by CodeEditor). ; codeEditor.ready (boolean) : Whether the script has booted. Modelist module ; codeEditor.modelist (object) : Modelist submodule for CodeEdtitor. : Members: :; codeEditor.modelist.modes (object) :: Parsed mode data map for the Fandom Ace editor. :: Maps Ace mode submodule name to relevant mode data. ::; Mode.name (string) ::: Mode Ace submodule key. ::; Mode.caption (string) ::: Mode code language caption. ::; Mode.mode (string) ::: Ace submodule identifier. ::; Mode.extensions (string) ::: Pipe-delimited extension list. ::; Mode.extRe (RegExp) ::: Regular expression for mode detection. :; codeEditor.modelist.getModeForPath (function) :: Path getter for automatic mode detection. :: Argument: path - Full path of current file. :: Returns: Detected mode of current file, or null (Mode; optional). Other methods & members ; codeEditor.valid (method) : Validator for CodeEditor modes. : Argument: prop (string) Mode name to validate. : Returns: Whether the mode string is valid (boolean). ; codeEditor.path (string) : Current path of wiki page (FULLPAGENAME). ; codeEditor.automode (string) : Automatic mode object determined by codeEditor.modelist. ; codeEditor.html (string) : Name of Ace's 'ace/mode/html' submodule. List of modes There are 101 language modes supported by CodeEditor currently. Notes * There are some differences to upstream Ace (v1.4.2): ** matlab mode has .m extension assigned to it, for multiple reasons: *** The MATLAB IDE doesn't support .matlab files. *** Objective-C is superseded by Swift. ** javascript mode has .javascript extension assigned to it. This is a common technique on Fandom used to bypass ongoing edit restrictions on User JavaScript pages. Code pages? ; What is a code page? : On Fandom, code files can't be uploaded (only some image formats can). : Unless they're JS & CSS, they are also not supported natively as articles. : To host a code page on Fandom, just create a page with an opening escape comment. : These files are editable through CodeEditor, with syntax highlighting. ; Show me one! : Code pages are editable on CodeEditor, and look okay, if you format them correctly. : A commented code escape goes at the top of the page. : Here's an example: // Code escapes? CodeEditor supports the following code block escapes: * (supported languages) * * However, CodeEditor can only handle single-line code escapes on a page. Why isn't it running? :CodeEditor is disabled for users who opt-out of Source syntax highlighting (see the , & personal override configuration). Fandom added this preference for users may have vision impairments, or for old browsers that do not support syntax highlighting. In order to keep CodeEditor sitewide, it respects the preference by default. See also * Jsonalert